<template>
  <div>
    <el-row>
      <el-input placeholder="请输入部门名称" v-model="deptName" clearable>
        <template #prefix>
          <i class="el-icon-search"></i>
        </template>
      </el-input>
    </el-row>
    <el-tree
      :data="treeData"
      :props="{ children: 'children', label: 'deptName' }"
      default-expand-all
      @node-click="nodeClick"
    />
  </div>
</template>
<script>
import { defineComponent, ref, watch } from "vue";
import { getTree } from "@/api/dept.js";
export default defineComponent({
  setup(props, ctx) {
    //输入框绑定的值
    const deptName = ref("");
    //树形结构数据
    const treeData = ref([]);
    //查询部门树形结构
    const getTreeData = async () => {
      let params = {
        deptName: deptName.value || undefined,
        status: 0,
      };
      const { data, success } = await getTree(params);
      if (success) {
        treeData.value = data;
      }
    };
    getTreeData();
    //监听部门名称变化
    watch(deptName, () => {
      getTreeData();
    });
    //树形节点被点击
    const nodeClick = (obj, node, treeNode, el) => {
      //结构出data
      const { data } = node;
      ctx.emit("setDeptId", data["id"]);
    };
    return {
      deptName,
      treeData,
      getTreeData,
      nodeClick,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-tree {
  margin-top: 15px;
}
</style>
